
<template>
    <div class="card-leader" @click="targetDetail">
		<div class="leader-info">
			<div class="pic">
				<img :src="srcImg" alt="" />
			</div>
			<div class="info-container">	
				<div class="basic-info ellipsis">
					<h2 >{{info.name}}</h2>
					<!--<span class="sex" >{{info.sex_descr}} {{info.birthdate | handleBirth}} ({{age}})</span>-->
				</div>
				<div class="posi-info ellipsis">
					<span>{{info.position_desc}}</span>
				</div>
			</div>
		</div>
		<div class="line"></div>
		<div class="leader-deg">
			<ul class="ellipsis">
				<li><i class="icon-deg"></i><span class="prop">生日</span><span>{{info.birthdate | handleBirth}} ({{age}})</span></li>
				<li><i class="icon-nation"></i><span class="prop">国籍</span><span>{{info.c_leader_ident}}</span></li>
				<li><i class="icon-politic"></i><span class="prop">面貌</span><span>{{info.political_sta_chn}}</span></li>
			</ul>
		</div>
    </div>
</template>
<script>

export default {
  data(){
      return{
          value:""
      }
  },
  computed:{
	age:function(){
		var date;
		this.info.birthdate && (date =this.info.birthdate.split(" ")[0]);
		return date ? new Date().getFullYear() - new Date(date).getFullYear() : '';
		//    date && (result = date.trim().substr(0,date.length-2).replace('-','.'));


	},
	srcImg : function(){
		var ImgObj = new Image(); //判断图片是否存在  
		ImgObj.src = this.Axios.baseURI + "/img/"+this.info.emplid+".png";  
		//没有图片，则返回-1  
		if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
			return this.Axios.baseURI +  "/img/"+this.info.emplid+".png";  
		} else {  
			return '/static/imgs/man image.png';
		}  
	},
  },
  components:{
  
  },
  methods:{
	  targetDetail:function(){
		  location.href = './module/confirmTable.html?emplid='+this.info.emplid;
	  }
  },
  filters:{
	handleBirth:function(value){
		// console.log(value.trim().substr(0,date.length-2).replace('-','.'),"handleBirth");
		var result;
		var mid = value.trim().split(" ")[0];
		value && ( mid && (result = mid.substr(0,mid.length-3).replace('-','.')));
		return result || "";
	}
  },
  props:{
	  info:{
		  type:Object,
		  default:function(){
			  return {}
		  }
	  }
  }
}
</script>
<style scoped>
.leader-info>div{	
	display:inline-block;
}
.leader-info .info-container{
	padding-left:0.1rem;
	max-width: 6rem;
}
.pic{
	vertical-align: top;
	width:0.92rem;
	height:0.92rem;
}
.pic img{
	width:0.92rem;
	height:0.92rem;
	border-radius:50%;
}
.card-leader{
	background-color:#fff;
	margin-top:0.1rem;
}
.card-leader .line{
	margin:0.24rem 0.2rem 0.14rem 0.2rem;
	border-top:1px solid #EEE;
}
.card-leader>div.leader-info{
	padding-left:0.3rem;
	padding-top:0.24rem;
}
.card-leader>div.leader-deg{
	padding-left:0.3rem;
	
	padding-bottom:0.24rem;
	font-size:0.32rem;
}
.card-leader>div.leader-deg .prop{
	color:#888;
	margin-right: 0.24rem;
	margin-left: 0.1rem;
}
.card-leader>div.leader-deg li{
	line-height: 1.6;
}

.leader-info .info-container .basic-info>h2{
	display:inline-block;
	font-size:0.36rem;
}
.leader-info .info-container .basic-info .sex{
	color:#888;
}
.leader-info .info-container .basic-info{
	margin-top:0.02rem;
	margin-bottom: 0.20rem;

}
.leader-info .info-container .posi-info{
	font-size:0.32rem;
}
.leader-info .ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>

